<template>
<div>
    <!-- <public-head :title="mydonetitle" :hasSearch="hasSearch"></public-head> -->
    <div class="header">
        <div class="nav">
            <img src="../../../../assets/images/nav_goback.png" alt="" @click="goback()">
            <h2>{{mydonetitle}}</h2>
        </div>
        <div class="header_info">
            <img src="../../../../../public/images/portrait.png" alt="">
            <div>
                <h3>飞翔的小土豆</h3>
                <span>部门：企业部 &nbsp;&nbsp;&nbsp;&nbsp;岗位：联控员 </span>
            </div>
        </div>
    </div>
    <div class="header_position">
        <div>
            <p>97</p>
            <p>我的成绩</p>
        </div>
        <div>
            <p>9</p>
            <p>正确数量</p>
        </div>
        <div>
            <p>1</p>
            <p>错题数量</p>
        </div>
    </div>

    <div class="content">
        <h2>考试的主题</h2>
        <div>
            <h3>1.单选题<span>*</span></h3>
            <van-radio-group v-model="radio" direction="horizontal">
                <van-radio name="1">A、刘亦菲</van-radio>
                <van-radio name="2">B、王一博</van-radio>
                <van-radio name="3">C、赵丽颖</van-radio>
            </van-radio-group>
            <span>正确答案：A</span>&nbsp;&nbsp;<span class="daan">(您的答案：B【-5分】)</span>
        </div>
        <div>
            <h3>2.选择你的兴趣爱好<span>*</span><span class="duo">(多选题)</span></h3>
			<van-checkbox-group v-model="result" direction="horizontal">
				<van-checkbox name="a">A、美术</van-checkbox>
				<van-checkbox name="b">B、唱歌</van-checkbox>
				<van-checkbox name="c">C、跳舞</van-checkbox>
			</van-checkbox-group>
            <span>正确答案：A、B、C、</span>&nbsp;&nbsp;<span class="daan"></span>
        </div>
        <div>
            <h3>3.填空题<span>*</span><span class="duo">(一个空格填写一个字)</span></h3>
			<div class="text">中国历史上第二个封建王朝的国号是汉，它的创立者是 <span>____</span>___ <span></span>。</div>
            <span>正确答案：汉、刘邦</span>&nbsp;&nbsp;<span class="daan"></span>
        </div>
        <div >
			<h3>4.简答题<span>*</span></h3>
			<van-field
				v-model="message"
				rows="2"
				autosize
				type="textarea"
				maxlength="50"
				placeholder="请输入"
				show-word-limit
				/>
		</div>
    </div>

</div>
</template>

<script>
// import PublicHead  from '../../../../components/PublicHead'
export default{
    name:"mydone",
    components:{
        // PublicHead
    },
    data() {
        return {
            mydonetitle:"我的成绩",
            radio: '1',
            result: [],
            message:""
        }
    },
    methods: {
        goback(){
            this.$router.go(-1);
        },
    },
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.header{
    width 100%
    background-color #198AFF
    margin 0
    overflow hidden
    color #fff
    .nav{
        display flex
        margin 33px 0 0 15px
        h2{
            font-size 17px
            font-weight bold 
        }
        img{
            width 13px
            height 20px
            display inline-block
            margin-right 120px
        }
    }
    .header_info{
        display flex
        margin 30px 0 48px 15px
        div{
            margin-left 10px
            margin-top 8px
            line-height 25px
            font-size 12.5px
            color #FFFEFE
            h3{
                font-size 15.5px
                color #FFFFFF
            }
        }
    }
    img{
        width 61px
        height 61px
    }
}
.header_position{
    position absolute
    top 162px
    left 15px
    display flex
    justify-content space-around
    background-color #fff
    color #333333
    height 60px
    width 345px
    border-radius 5px
    text-align center
    line-height 25px
    padding-top: 5px;
    box-sizing: border-box;
}
.content{
    margin-top 40px
    margin-left 15px
    background-color #FFF
    width 345px
    border-radius 5px
    line-height 35px
    padding 15px 10px
    box-sizing border-box
    font-size 14.5px
    h3{
        font-size 15.5px
        // line-height 42px
        margin-bottom 10px
        span{
            color #FD3F3F
        }
        .duo{
            color #999999
        }
    }
    span{
        color #198AFF
        margin-top 10px
        display inline-block
    }
    .daan{
        color #F95425
        // line-height 42px
    }
    .text{
		line-height: 12px;
	}
    .van-radio__label {
        line-height  1.33333rem;
    }
    .van-field{
        border: 1px solid #ddd;
	}
}
</style>
